<template>
  <div id="main" style="width: 600px;height:400px;"></div>
</template>

<script setup lang="ts">
import {onMounted} from 'vue'
import HuiCharts from '@opentiny/huicharts';

onMounted(() => {
  let chartIns = new HuiCharts();

  let chartContainerDom = document.getElementById('main');
  chartIns.init(chartContainerDom);

// 填入图表配置项
  let chartOption =  {
    theme: 'bpit-dark',
    padding: [50, 30, 50, 20],
    data: [
      { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
      { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
      { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
      { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
      { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
      { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
      { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
      { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
      { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
      { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
      { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
      { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
    ],
    xAxis: {
      data: 'Month',
    },
    yAxis: {
      name: 'Percentage(%)'
    }
  }
// 指定使用图表类型：LineChart、AreaChart、BarChart、PieChart、GaugeChart、RadarChart、ProcessChart、BubbleChart等
// 图表类型的英文名称可以在文档左侧菜单栏看到
  let chartType = 'BarChart';
  chartIns.setSimpleOption(chartType, chartOption);

// 开始渲染
  chartIns.render();
})

</script>


<style scoped lang="scss">

</style>
